<template>
  <div class="query">
    <div class="check">
      <div class="c_left">条件搜索栏</div>
      <div class="c_right">
        <div class="clear">
          <div class="fl">
            <span class="c_tip">咨询类别</span>
            <el-cascader
              v-model="tempConsulatationname"
              clearable
              :options="ConsultationItemdictList"
              @change="handleChange"
            />
          </div>
          <div class="fl">
            <span class="c_tip">咨询时间</span>
            <el-date-picker
              v-model="queryInfo.Startdate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            />
            <span>至</span>
            <el-date-picker
              v-model="queryInfo.Enddate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            />
          </div>
          <div class="fl">
            <span class="c_tip">问题/接答</span>
            <el-input v-model="queryInfo.Consulatationtext" type="text" placeholder="查询问题/药师解答" />
          </div>
          <div class="fl">
            <span class="c_tip" />
            <el-button type="primary" class="btn_clear" @click="getConsultationListJson">查询</el-button>
            <el-button type="success" class="btn_clear" @click="addConsultation">新增</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="list_tip clear" />
    <div class="table_box">
      <Bluetable
        ref="blueTable"
        :t-head="tHead"
        :t-data="consultationList"
        @operateClick="operateClick"
      />
      <pagination
        :total="queryPage.total"
        :page.sync="queryPage.pagenum"
        :limit.sync="queryPage.pagesize"
        @pagination="getList"
      />
    </div>
    <!--    对话框-->
    <el-dialog width="1150px" title="用药咨询录入" :visible.sync="dialogFormVisible">
      <div class="form-wrapper">
        <el-form :model="form">
          <el-form-item label="咨询者分类" :label-width="formLabelWidth">
            <el-radio-group v-model="form.ConsultationName">
              <template v-for="item in ConsultationItemdictList1.children">
                <el-radio :label="item.value" />
              </template>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="咨询方式" :label-width="formLabelWidth">
            <el-radio-group v-model="form.ConsultationType">
              <template v-for="item in ConsultationItemdictList2.children">
                <el-radio :label="item.value" />
              </template>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="问题分类" :label-width="formLabelWidth">
            <el-checkbox-group v-model="form.QuestionType">
              <template v-for="item in ConsultationItemdictList3.children">
                <el-checkbox :label="item.value" />
              </template>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="咨询问题" :label-width="formLabelWidth">
            <el-input v-model="form.Question" type="textarea" />
          </el-form-item>
          <el-form-item label="药师解答" :label-width="formLabelWidth">
            <el-input v-model="form.Answer" type="textarea" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateConsultationInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetConsultationListJson,
  GetConsultationItemdictList,
  GetConsultationDetail,
  SaveConsultationInfo
} from '@/api/cpw'
export default {
  components: {
  },
  data() {
    return {
      queryInfo: {
        Consulatationname: '',
        Startdate: '',
        Enddate: '',
        Consulatationtext: ''
      },
      form: {
        ConsultationId: '',
        ConsultationName: '',
        ConsultationType: '',
        QuestionType: [],
        Question: '',
        Answer: '',
        UserName: '',
        Status: ''
      },
      tempform: {},
      // 咨询分类
      ConsultationItemdictList: [],
      // 咨询分类最后值
      tempConsulatationname: [],
      // 咨询者类别
      ConsultationItemdictList1: {
        value: 'zxzlb',
        label: '咨询者类别',
        children: []
      },
      // 咨询方式
      ConsultationItemdictList2: {
        value: 'zxfs',
        label: '咨询方式',
        children: []
      },
      // 问题类别
      ConsultationItemdictList3: {
        value: 'wtlb',
        label: '问题类别',
        children: []
      },
      // 查询结果列表
      consultationList: [],
      // 查询病人列表分页参数
      queryPage: {
        // 第n页
        pagenum: 1,
        // 每页多少条
        pagesize: 10,
        // 总条数
        total: 0
      },
      dialogFormVisible: false,
      formLabelWidth: '100px',
      tHead: [
        {
          operate: ['修改', '删除'],
          label: '操作',
          width: '100px'
        },
        {
          prop: 'consulatationname',
          label: '咨询者分类',
          width: '100px'
        },
        {
          prop: 'consulatationtype',
          label: '咨询方式',
          width: '100px'
        },
        {
          prop: 'questiontype',
          label: '问题类型',
          width: '200px'
        },
        {
          prop: 'question',
          label: '咨询内容'
        },
        {
          prop: 'answer',
          label: '药师的解答'
        }, {
          prop: 'createusename',
          label: '创建人',
          width: '100px'
        }, {
          prop: 'createdate',
          label: '创建时间'
        }]
    }
  },
  created() {
    // 获取咨询类别
    this.getConsultationItemdictList('1')
    this.getConsultationItemdictList('2')
    this.getConsultationItemdictList('3')
  },
  methods: {
    // 获取咨询类别
    async getConsultationItemdictList(type) {
      await GetConsultationItemdictList({
        type: type
      }).then(res => {
        this.handleConsultationItemdictList(type, res.ConsultationItemdictList)
      }).catch(err => {
        console.log(err)
      })
    },
    // 处理咨询类别
    handleConsultationItemdictList(type, obj) {
      if (type === '1') {
        for (const i in obj) {
          const tempObj = {
            value: obj[i].name,
            label: obj[i].name
          }
          this.ConsultationItemdictList1.children.push(tempObj)
        }
        this.ConsultationItemdictList.push(this.ConsultationItemdictList1)
      } else if (type === '2') {
        for (const i in obj) {
          const tempObj = {
            value: obj[i].name,
            label: obj[i].name
          }
          this.ConsultationItemdictList2.children.push(tempObj)
        }
        this.ConsultationItemdictList.push(this.ConsultationItemdictList2)
      } else if (type === '3') {
        for (const i in obj) {
          const tempObj = {
            value: obj[i].name,
            label: obj[i].name
          }
          this.ConsultationItemdictList3.children.push(tempObj)
        }
        this.ConsultationItemdictList.push(this.ConsultationItemdictList3)
      }
    },
    // 咨询类别
    handleChange(value) {
      this.queryInfo.Consulatationname = value[1]
    },
    // 获取咨询列表
    async getConsultationListJson() {
      var tempObject = JSON.parse(JSON.stringify(this.queryInfo))
      for (var key in tempObject) {
        if (tempObject[key] === '') {
          delete tempObject[key]
        }
      }
      await GetConsultationListJson({
        json: tempObject,
        // 第n页
        pagenum: this.queryPage.pagenum,
        // 每页多少条
        pagesize: this.queryPage.pagesize
      }).then(res => {
        this.queryPage.total = res.records
        this.queryPage.pagenum = res.page
        this.consultationList = res.rows
        this.form = {
          ConsultationId: '',
          ConsultationName: '',
          ConsultationType: '',
          QuestionType: [],
          Question: '',
          Answer: '',
          UserName: '',
          Status: ''
        }
      }).catch(err => {
        console.log(err)
      })
    },
    async getList(type) {
      this.queryPage.pagenum = type.page
      this.queryPage.pagesize = type.limit
      await this.getConsultationListJson()
    },
    // 获取单个咨询的详细
    async getConsultationDetail(id) {
      await GetConsultationDetail({
        id: id
      }).then(res => {
        this.tempform = res.ConsultationDetail[0],
        this.form.ConsultationId = res.ConsultationDetail[0].consulatationid,
        this.form.ConsultationName = res.ConsultationDetail[0].consulatationname,
        this.form.ConsultationType = res.ConsultationDetail[0].consulatationtype,
        this.form.QuestionType = res.ConsultationDetail[0].questiontype === null ? [] : res.ConsultationDetail[0].questiontype.split(','),
        this.form.Question = res.ConsultationDetail[0].question,
        this.form.Answer = res.ConsultationDetail[0].answer,
        this.form.UserName = res.ConsultationDetail[0].createusename,
        this.form.Status = res.ConsultationDetail[0].status
      }).catch(err => {
        console.log(err)
      })
    },
    // 新增 修改 保存
    async saveConsultationInfo(temp) {
      await SaveConsultationInfo({
        json: temp
      }).then(res => {
        if (res === '修改成功') {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        } else if (res === '新增成功') {
          this.$message({
            message: '新增成功',
            type: 'success'
          })
        } else if (res === '删除成功') {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '操作失败',
            type: 'warning'
          })
        }
        this.getConsultationListJson()
      }).catch(err => {
        console.log(err)
      })
    },
    // 修改、删除
    operateClick(val, row) {
      if (val === '修改') {
        this.getConsultationDetail(row.consulatationid)
        this.dialogFormVisible = true
      } else if (val === '删除') {
        GetConsultationDetail({
          id: row.consulatationid
        }).then(res => {
          this.form.ConsultationId = res.ConsultationDetail[0].consulatationid,
          this.form.ConsultationName = res.ConsultationDetail[0].consulatationname,
          this.form.ConsultationType = res.ConsultationDetail[0].consulatationtype,
          this.form.QuestionType = res.ConsultationDetail[0].questiontype === null ? [] : res.ConsultationDetail[0].questiontype.split(','),
          this.form.Question = res.ConsultationDetail[0].question,
          this.form.Answer = res.ConsultationDetail[0].answer,
          this.form.UserName = res.ConsultationDetail[0].createusename,
          this.form.Status = '2',
          this.updateConsultationInfo()
        }).catch(err => {
          console.log(err)
        })
      }
    },
    // 修改
    updateConsultationInfo() {
      const updateTemp = {
        ConsultationId: this.form.ConsultationId,
        ConsultationName: this.form.ConsultationName,
        ConsultationType: this.form.ConsultationType,
        QuestionType: this.form.QuestionType.join(','),
        Question: this.form.Question,
        Answer: this.form.Answer,
        UserName: this.form.UserName,
        Status: this.form.Status
      }
      this.saveConsultationInfo(updateTemp)
      this.dialogFormVisible = false
    },
    // 新增
    addConsultation() {
      this.dialogFormVisible = true
      this.form.Status = '1'
      this.form.UserName = 'adminTest'
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  body{
    font-size: 12px;
  }
  /deep/.el-input{
    width:150px;
    height:40px;
    border-radius:4px;
    padding-left:5px;
    font-size: 12px;
  }
  .query{
    width:100%;
    height:100%;
    background:#e6edf5;
    .check{
      font-size:12px;
      display:flex;
      line-height:60px;
      background:#fff;
      text-align:center;
      .c_left{
        width:115px;
        float:left;
      }
      .c_right{
        overflow:hidden;
        color:#636365;
        border-left:1px solid #e6edf5;
        .c_tip{
          display:inline-block;
          width:100px;
          padding-right:10px;
          text-align:right;
        }
        .c_input{
          width:150px;
          height:40px;
          border:1px solid #dcdfe6;
          border-radius:4px;
          padding-left:5px;
        }

        .c_input::-webkit-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-ms-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-moz-input-placeholder {
          color: #dcdfe6;
        }
        .c_search{
          width:100px;
        }
        .c_searchbtn{
          display:inline-block;
          width:42px;
          height:25px;
          margin-left:4px;
          background:#28a4f4;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_checkbox{
          width:230px;
          height:40px;
          display:inline-block;
          margin-left:-12px;
        }
        .btn_clear{
          padding:0;
          width:70px;
          height:40px;
          line-height:40px;
        }
      }
    }
    .list_tip{
      font-size:14px;
      color:#29a4f2;
      padding:10px 18px;
    }
    .table_box{
      padding:0 18px;
    }
  }

  .wrapper{
    background-color: #e6edf5;
    height: 576px;

    display: flex;
    .content-left{
      width: 145px;
      padding: 5px 5px;
      background-color: #fff;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: start;
      justify-content: center;
      .btns{
        width: 100%;
        margin: 5px;

      }
    }
    .content-right{
      .right-top{
        width: 985px;
        padding: 20px;
        .cardBody{
          display: flex;
          .body-left{
            font-size: 24px;
            padding-right: 20px;
            border-right: 1px solid #f1f1f1;
          }
          .body-right{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-left: 20px;
            .body-right-top{
              width: 100%;
              display: flex;
              font-size: 16px;
              .age{
                margin-left: 10px;
              }

            }
            .body-right-bottom{
              width: 100%;
              display: flex;
              margin-top: 5px;
              .item{
                display: flex;
                margin-right: 20px;
                .item-key{
                  color: #909399;
                }
                .item-value{
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }
      .right-bottom{
        padding: 0 20px;
        width: 985px;
        .medical-history{
          .history-name{
            span{
              background-color: #409eff;
              font-size: 14px;
              padding: 2px 10px;
              color: #ffffff;
              width: 65px;
              height: 20px;
              border-radius: 2px;
            }
            padding-bottom: 5px;
          }
          .histort-message{
            margin-left: 10px;
            padding-bottom: 5px;
            line-height: 25px;

          }
        }
        .record{
          font-size: 12px ;
          .record-table{
            margin-top: 20px;
          }
        }

      }
    }
  }
  /deep/.el-checkbox{
    width: 120px;
    margin-right: 25px;
  }
  /deep/.el-radio{
    width: 120px;
    margin-right: 25px;
  }
</style>
